import React, { Component } from 'react'


class Box extends Component {
    //TODO:性能优化
    shouldComponentUpdate(nextprops){
        if(this.props.current===this.props.index||nextprops.current===nextprops.index){
            return true
        }
        return false
    }
    render() {
        console.log('render')
        return (
          <div style={{width:'100px',height:'100px',border:this.props.current===this.props.index?'1px solid red':'1px solid green',margin:'10px', float: 'left'}}>12更新状态</div>
        )
      }
}
export default class App extends Component {
    state={
        list:['1','2','3','4','5','6','7','8','9'],
        current:0
    }
  render() {
    return (
      <div>
          <input type="number" onChange={(e)=>this.setState({current:Number(e.target.value)})}/>
          <div style={{overflow: 'hidden'}}>
              {
                  this.state.list.map((item,index) =><Box key={index} index={index} current={this.state.current}></Box>)
              }
          </div>
      </div>
    )
  }
}
